<template>
  <a-card title="抽奖计算">
    <a-row>
      <a-col :span="8" class="list">
        <div class="label">奖品金额成本</div>
        <div class="contxt">{{ allData.endPrice }} 元</div>
      </a-col>
      <a-col :span="8" class="list">
        <div class="label">初始每抽成本</div>
        <div class="contxt">{{ allData.startAveragePrcie }} 元</div>
      </a-col>
      <a-col :span="8" class="list">
        <div class="label">平均每抽成本</div>
        <div class="contxt">{{ allData.endAveragePrcie }} 元</div>
      </a-col>
    </a-row>
    <a-row>
      <a-col :span="8" class="list">
        <div class="label">高净值商品数</div>
        <div class="contxt">{{ allData.coast }}</div>
      </a-col>
      <a-col :span="8" class="list">
        <div class="label">保本抽奖金额区间</div>
        <div class="contxt">{{ allData.minOncePay }} ~ {{ allData.maxOncePay }} 元</div>
      </a-col>
      <a-col :span="8" class="list">
        <div class="label">总概率</div>
        <div class="contxt">{{ allData.probability }} %</div>
      </a-col>
    </a-row>
  </a-card>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
import type {  ActivePoolItem } from '@/types/active.api'

const allData = ref({
  startPrice: '',
  probability: '',
  endPrice: '',
  maxNum: 0,
  endAveragePrcie: '',
  startAveragePrcie: '',
  macthPrice: '',
  coast: 0,
  maxOncePay: '',
  minOncePay: '',
})
const prop = defineProps<{
  tableList: ActivePoolItem[]
}>()
watch(
  () => {
    let maxNum = 0
    let minNum = 0
    let startPrice = 0
    let endPrice = 0
    let coast = 0
    let makeUpNum = 0
    let probability = 0
    prop.tableList.forEach((item: ActivePoolItem) => {
      console.log(item.probability)
      probability +=  Number(item.probability || 0)
      if (!item.guarantee) {
        minNum += item.total
        startPrice += item.draw.price * item.total
        coast += 1
      } else {
        makeUpNum += (1 / item.probability) * item.total
      }
      maxNum += item.total
      endPrice += item.draw.price * item.total
    }, 0)
    allData.value.maxNum = maxNum
    allData.value.startPrice = (startPrice / 100).toFixed(2)
    allData.value.endPrice = (endPrice / 100).toFixed(2)
    allData.value.startAveragePrcie = (startPrice / minNum / 100).toFixed(2)
    allData.value.endAveragePrcie = (endPrice / maxNum / 100).toFixed(2)
    allData.value.macthPrice = ((endPrice - startPrice) / 100).toFixed(2)
    allData.value.coast = coast
    allData.value.maxOncePay = (endPrice / (minNum + coast) / 100).toFixed(2)
    allData.value.minOncePay = (endPrice / makeUpNum / 100).toFixed(2)
    allData.value.probability = (probability * 100).toFixed(2)
  },
  () => [prop.tableList],
  {
    immediate: true,
    deep: true,
  },
)
</script>
<style lang="stylus" scoped>
.list
  display flex
.label
  color #333
  width 130px
.contxt
  color #1677ff
</style>
